<template>
    <header class="poker-strategy-filter">
        <div class="flop-filter">
            <div class="filter-left">
                <div class="flop-filter-div">
                    <span>翻牌过滤</span>
                    <el-input
                        @change="handleFilterChange"
                        v-model="filterText"
                    ></el-input>
                </div>
                <div class="suit-wrapper">
                    <el-checkbox-group v-model="suitGroup" size="mini">
                        <el-checkbox-button
                            v-for="item in suitList"
                            :label="item.value"
                            :key="item.label"
                            >{{ item.label }}</el-checkbox-button
                        >
                    </el-checkbox-group>
                </div>
                <div class="pair-wrapper">
                    <el-checkbox-group v-model="pairGroup" size="mini">
                        <el-checkbox-button
                            v-for="item in pairList"
                            :label="item.value"
                            :key="item.label"
                            >{{ item.label }}</el-checkbox-button
                        >
                    </el-checkbox-group>
                </div>
            </div>
            <div class="card-filter">
                <div class="first-card-wrapper">
                    <el-checkbox-group v-model="firstCard" size="mini">
                        <el-checkbox-button
                            v-for="item in cardList"
                            :label="item.value"
                            :key="item.label"
                            >{{ item.label }}</el-checkbox-button
                        >
                    </el-checkbox-group>
                </div>
                <div class="second-card-wrapper">
                    <el-checkbox-group v-model="secondCard" size="mini">
                        <el-checkbox-button
                            v-for="item in cardList"
                            :label="item.value"
                            :key="item.label"
                            >{{ item.label }}</el-checkbox-button
                        >
                    </el-checkbox-group>
                </div>
                <div class="third-card-wrapper">
                    <el-checkbox-group v-model="thirdCard" size="mini">
                        <el-checkbox-button
                            v-for="item in cardList"
                            :label="item.value"
                            :key="item.label"
                            >{{ item.label }}</el-checkbox-button
                        >
                    </el-checkbox-group>
                </div>
            </div>
            <div class="card-num-filter">
                <div class="total-card-num-wrapper num-wrapper">
                    <span>总点数</span>
                    <el-slider
                        v-model="totalCardNum"
                        range
                        :min="6"
                        :max="42"
                        input-size="mini"
                    ></el-slider>
                </div>
                <div class="connect-num-wrapper num-wrapper">
                    <span>连接数</span>
                    <el-slider
                        v-model="connectNum"
                        range
                        :min="0"
                        :max="12"
                        input-size="mini"
                    ></el-slider>
                </div>
                <div class="min-connect-num-wrapper num-wrapper">
                    <span>最小连接</span>
                    <el-slider
                        v-model="minConnectNum"
                        range
                        :min="0"
                        :max="8"
                        input-size="mini"
                    ></el-slider>
                </div>
                <div class="max-connect-num-wrapper num-wrapper">
                    <span>最大连接</span>
                    <el-slider
                        v-model="maxConnectNum"
                        range
                        :min="0"
                        :max="11"
                        input-size="mini"
                    ></el-slider>
                </div>
            </div>
        </div>
    </header>
</template>

<script>
export default {
    name: "PokerStrategyFilter",
    data() {
        return {
            filterText: "",
            suitList: [
                {
                    label: "彩虹面",
                    value: 3,
                },
                {
                    label: "抽花面",
                    value: 2,
                },
                {
                    label: "天花面",
                    value: 1,
                },
            ],
            pairList: [
                {
                    label: "无对面",
                    value: 3,
                },
                {
                    label: "公对面",
                    value: 2,
                },
                {
                    label: "三条面",
                    value: 1,
                },
            ],
            cardList: [
                {
                    label: "A",
                    value: 14,
                },
                {
                    label: "K",
                    value: 13,
                },
                {
                    label: "Q",
                    value: 12,
                },
                {
                    label: "J",
                    value: 11,
                },
                {
                    label: "T",
                    value: 10,
                },
                {
                    label: "9",
                    value: 9,
                },
                {
                    label: "8",
                    value: 8,
                },
                {
                    label: "7",
                    value: 7,
                },
                {
                    label: "6",
                    value: 6,
                },
                {
                    label: "5",
                    value: 5,
                },
                {
                    label: "4",
                    value: 4,
                },
                {
                    label: "3",
                    value: 3,
                },
                {
                    label: "2",
                    value: 2,
                },
            ],
            suitGroup: [3, 2, 1],
            pairGroup: [3, 2, 1],
            firstCard: [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
            secondCard: [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
            thirdCard: [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
            totalCardNum: [6, 42],
            connectNum: [0, 12],
            minConnectNum: [0, 8],
            maxConnectNum: [0, 11],
        };
    },
    watch: {
        suitGroup(val) {
            this.$emit("filterSuitChange", val);
        },

        pairGroup(val) {
            this.$emit("filterPairChange", val);
        },

        firstCard(val) {
            this.$emit("firstCardChange", val);
        },

        secondCard(val) {
            this.$emit("secondCardChange", val);
        },

        thirdCard(val) {
            this.$emit("thirdCardChange", val);
        },

        totalCardNum(val) {
            this.$emit("totalCardNumChange", val);
        },

        connectNum(val) {
            this.$emit("connectNumChange", val);
        },

        minConnectNum(val) {
            this.$emit("minConnectNumChange", val);
        },
        maxConnectNum(val) {
            this.$emit("maxConnectNumChange", val);
        },
    },
    methods: {
        handleFilterChange(val) {
            this.$emit("filterChange", val);
        },
    },
};
</script>

<style lang="scss">
.poker-strategy-filter {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    font-size: 14px;
    .flop-filter {
        display: flex;
        align-items: center;
        flex: 1;
        margin-bottom: 8px;

        .filter-left {
            display: flex;
            flex-direction: column;
            margin-right: 20px;
        }

        .flop-filter-div {
            span {
                margin-right: 5px;
            }
            .el-input {
                width: 140px;
            }

            .el-input__inner {
                height: 30px;
                line-height: 30px;
            }
            margin-bottom: 5px;
        }

        .suit-wrapper {
            margin-bottom: 5px;
        }

        .card-filter {
            display: flex;
            flex-direction: column;
            margin-right: 20px;

            .first-card-wrapper {
                margin-bottom: 5px;
            }

            .second-card-wrapper {
                margin-bottom: 5px;
            }
        }

        .card-num-filter {
            flex: 1;
            .num-wrapper {
                display: flex;
                align-items: center;

                span {
                    font-size: 13px;
                    width: 70px;
                }
                .el-slider {
                    flex: 1;

                    .el-slider__runway {
                        margin: 10px 0;
                    }
                }
            }
        }
    }
}
</style>
